<template>
  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
      <!--      <el-form-item label="户号" prop="roomNo">-->
      <!--        <el-input v-model="queryParams.roomNo" placeholder="请输入户号" clearable size="mini"-->
      <!--                  @keyup.enter.native="handleQuery"/>-->
      <!--      </el-form-item>-->
      <el-form-item label="关键字" prop="realName">
        <el-input v-model="queryParams.realName" placeholder="请输入业主姓名或手机号或户号" clearable size="mini"
                  style="width: 240px;"
                  @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="欠费月份数" prop="unPayMonthCount">
        <el-input v-model="queryParams.unPayMonthCount" placeholder="请输入欠费月份数" clearable size="mini"
                  style="width: 240px;" @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <router-link :to="'/property/estate'" class="link-type">
          <el-button icon="el-icon-back" size="mini">
            返 回
          </el-button>
        </router-link>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd"
                   v-hasPermi="['module:estateRoom:add']">新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" icon="el-icon-edit" size="small" :disabled="single" @click="handleUpdate"
                   v-hasPermi="['module:estateRoom:edit']">修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" icon="el-icon-edit" size="small" :disabled="multiple" @click="handleMultiQrcode"
                   v-hasPermi="['module:estateRoom:edit']">批量生成二维码
        </el-button>
      </el-col>
      <!--      <el-col :span="1.5">-->
      <!--        <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"-->
      <!--                   v-hasPermi="['module:estateRoom:remove']">删除</el-button>-->
      <!--      </el-col>-->


      <el-col :span="1.5">
        <el-button icon="el-icon" type="primary" size="small" @click.stop="daoru1()">导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button icon="el-icon" type="warning" size="small" @click.stop="daochu1()">导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button icon="el-icon" type="success" size="small" @click.stop="mingxi1()">明细</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button icon="el-icon" type="primary" size="small" @click.stop="tongji1()">统计</el-button>
      </el-col>
<!--      <el-col :span="1.5">-->
<!--        <el-button icon="el-icon" type="primary" size="small" @click.stop="shengcheng()">生成用户</el-button>-->
<!--      </el-col>-->
      <el-col :span="1.5">
        <el-button icon="el-icon" type="success" size="small" @click.stop="handleAddTempByYear()">按年生成物业费
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button icon="el-icon" type="success" size="small" @click.stop="handleSendSmsToUnPay()">批量发送催费短信
        </el-button>
      </el-col>
      <el-col :span="1.5" v-if="tongji">
        <el-tag style="cursor: pointer" :type="'success'">{{ '应收费：' + totalFee[0] }}</el-tag>
      </el-col>
      <el-col :span="1.5" v-if="tongji">
        <el-tag style="cursor: pointer" :type="'success'">{{ '当前共收费：' + totalFee[2] }}</el-tag>
      </el-col>
      <el-col :span="1.5" v-if="tongji">
        <el-tag style="cursor: pointer" :type="'success'">{{ '待收费：' + totalFee[1] }}</el-tag>
      </el-col>
      <el-col :span="1.5" v-if="tongji">
        <el-tag style="cursor: pointer" :type="'success'">{{ '收费率：' + totalFee[3] }}</el-tag>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="roomList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="住宅ID" align="center" prop="id"/>
      <el-table-column label="户号" align="center" width="150">
        <template slot-scope="scope">
          <el-popover placement="right" width="400" trigger="hover">
            <el-image style="width: 380px; height: 380px" :src="scope.row.qrCode" fit="fill"/>
            <i class="el-icon-picture" slot="reference"/>
          </el-popover>
          <el-button size="mini" type="text" icon="el-icon-download"
                     @click="downloadImg(scope.row)">{{ scope.row.roomNo }}
          </el-button>
        </template>
      </el-table-column>
      <!--  <el-table-column label="房间号" align="center" prop="roomNum" />-->
      <el-table-column label="房屋面积" align="center" prop="roomArea">
        <template slot-scope="scope">
          <div>{{ (scope.row.roomArea != null ? scope.row.roomArea : '') + '㎡' }}</div>
        </template>
      </el-table-column>
      <el-table-column label="房屋类型" align="center" prop="roomType">
        <!--0 - 高层 1 - 多层 2- 商业 3 - 别墅 4 - 其他-->
        <template slot-scope="scope">
          <div>
            <el-tag v-if="scope.row.roomType === 0" style="cursor: pointer" :type="''">高层</el-tag>
            <el-tag v-if="scope.row.roomType === 1" style="cursor: pointer" :type="''">多层</el-tag>
            <el-tag v-if="scope.row.roomType === 2" style="cursor: pointer" :type="''">商业</el-tag>
            <el-tag v-if="scope.row.roomType === 3" style="cursor: pointer" :type="''">别墅</el-tag>
            <el-tag v-if="scope.row.roomType === 4" style="cursor: pointer" :type="''">其他</el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="房主姓名" align="center" prop="realName"/>
      <el-table-column label="房主手机号" align="center" prop="phoneNum"/>
      <el-table-column label="物业缴费" align="center" prop="paymentTo"/>
      <el-table-column label="余额" align="center" prop="account">
        <template slot-scope="scope">
          {{ scope.row.account + "元" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="500">
        <template slot-scope="scope">
          <!--          <el-button size="mini" type="text" icon="el-icon-user-solid" v-if="qianfei==undefined" >-->
          <!--            <router-link :to="'/property/fee/detail?estateId=' + scope.row.estateId + '&roomId=' + scope.row.id+'&from=room&state=0'" class="link-type">-->
          <!--              预交物业费-->
          <!--            </router-link>-->
          <!--          </el-button>-->
          <el-button size="mini" type="text" icon="el-icon-user-solid">
            <router-link :to="'/property/wyfPay?estateId=' + scope.row.estateId + '&roomId=' + scope.row.id"
                         class="link-type">
              线下缴费
            </router-link>
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-user-solid" v-if="qianfei==undefined">
            <router-link
              :to="'/property/fee/template?estateId=' + scope.row.estateId + '&roomId=' + scope.row.id+'&from=room'"
              class="link-type">
              物业费详情
            </router-link>
          </el-button>
          <!--          <el-button size="mini" type="text" icon="el-icon-user-solid" v-if="qianfei==undefined" >-->
          <!--            <router-link :to="'/property/fee/detail?estateId=' + scope.row.estateId + '&roomId=' + scope.row.id+'&from=room'" class="link-type">-->
          <!--              交费明细-->
          <!--            </router-link>-->
          <!--          </el-button>-->
          <!--          <el-button size="mini" type="text" icon="el-icon-user-solid" v-if="qianfei==undefined" >-->
          <!--            <router-link :to="'/property/info?estateId=' + scope.row.estateId + '&roomId=' + scope.row.id+'&from=room'" class="link-type">-->
          <!--              住户详情-->
          <!--            </router-link>-->
          <!--          </el-button>-->
          <!--          <el-button size="mini" type="text" icon="el-icon-user-solid" @click="wyfjiaofei(scope.row)">物业缴费</el-button>-->
          <!--          <el-button size="mini" type="text" icon="el-icon-user-solid" v-if="qianfei==0">-->
          <!--            <router-link :to="'/property/fee/template?estateId=' + scope.row.estateId + '&roomId=' + scope.row.id+'&from=room&state=0'" class="link-type">-->
          <!--              物业费欠费明细-->
          <!--            </router-link>-->
          <!--          </el-button>-->
          <!--          <el-button size="mini" type="text" icon="el-icon-user-solid" v-if="qianfei==1">-->
          <!--            <router-link :to="'/property/fee/template?estateId=' + scope.row.estateId + '&roomId=' + scope.row.id+'&from=room&state=1'" class="link-type">-->
          <!--              物业费缴费明细-->
          <!--            </router-link>-->
          <!--          </el-button>-->
          <el-button size="mini" type="text" icon="el-icon-user-solid" @click="kongzhi(scope.row)"
                     v-hasPermi="['module:estateRoom:edit']">设置空置房
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-picture" @click="resetQrCode(scope.row)"
                     v-hasPermi="['module:estateRoom:edit']">生成二维码
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="chongzhi(scope.row)"
                     v-hasPermi="['module:estateRoom:edit']">充值
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                     v-hasPermi="['module:estateRoom:edit']">修改
          </el-button>
          <!--          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"-->
          <!--                     v-hasPermi="['module:estateRoom:remove']">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"/>
    <!--导入-->
    <el-dialog
      title="提示"
      :visible.sync="daoru"
      width="30%"
      :before-close="guanbi1">
      <div slot="footer" class="dialog-footer">

        <el-button type="primary" icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleImportWyf"
                   v-hasPermi="['module:feeOrderTemp:import']">导入物业费
        </el-button>

        <el-button type="primary" icon="el-icon-download" size="mini" :loading="exportLoading"
                   @click="handleImportWyfYear"
                   v-hasPermi="['module:feeOrderTemp:import']">导入物业费(按年)
        </el-button>

        <el-button type="primary" icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleImportSdJ"
                   v-hasPermi="['module:feeOrderTemp:import']">导入水电加压
        </el-button>

        <el-button @click="guanbi1">取 消</el-button>
      </div>
    </el-dialog>
    <!--导出-->
    <el-dialog
      title="提示"
      :visible.sync="daochu"
      width="30%"
      :before-close="guanbi2">
      <div slot="footer" class="dialog-footer">

        <el-button type="warning" icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleExport"
                   v-hasPermi="['module:estateRoom:export']">导出
        </el-button>
        <el-button type="warning" icon="el-icon-download" size="mini" :loading="exportLoading"
                   @click="handleWaterExport"
                   v-hasPermi="['module:estateRoom:export']">导出水表信息
        </el-button>
        <el-button type="warning" icon="el-icon-download" size="mini" :loading="exportLoading"
                   @click="handleEletrictExport"
                   v-hasPermi="['module:estateRoom:export']">导出电表信息
        </el-button>
        <el-button @click="guanbi2">取 消</el-button>
      </div>
    </el-dialog>
    <!--明细-->
    <el-dialog
      title="提示"
      :visible.sync="mingxi"
      width="40%"
      :before-close="guanbi3">
      <span slot="footer" class="dialog-footer">

        <router-link :to="'/property/arrearage?estateId='+queryParams.estateId">
          <el-button type="success" icon="el-icon-plus" size="mini">
            历史清欠
          </el-button>
        </router-link>
        &nbsp;&nbsp;
        <router-link :to="'/property/fee/template?estateId=' + queryParams.estateId +'&from=room&state=2'">
          <el-button type="success" icon="el-icon-plus" size="mini">
            线下缴费明细
          </el-button>
        </router-link>&nbsp;&nbsp;
        <router-link :to="'/property/fee/template?estateId=' + queryParams.estateId +'&from=room&state=0'">
          <el-button type="success" icon="el-icon-plus" size="mini">
            未缴费明细
          </el-button>
        </router-link>&nbsp;&nbsp;
        <router-link :to="'/property/fee/template?estateId=' + queryParams.estateId +'&from=room&state=1'">
          <el-button type="success" icon="el-icon-plus" size="mini">
            线上缴费明细
          </el-button>
        </router-link>&nbsp;&nbsp;
        <br/><br/>
        <el-button @click="guanbi3">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 物业缴费对话框 -->
    <!--    <el-dialog title="物业缴费"
        :visible.sync="jiaofei"
        width="40%"
        :before-close="guanbi4">

          <el-button @click="guanbi4">取 消</el-button>
        </el-dialog>-->

    <!-- 添加或修改小区内的房屋列信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="所在小区" prop="estateId">
              <el-select v-model="form.estateId" placeholder="请选择小区" size="mini" style="width:100%;" filterable
                         clearable>
                <el-option v-for="estate in estatesOptions"
                           :key="estate.id"
                           :label="estate.estateName"
                           :value="estate.id"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="房主姓名" prop="realName">
              <el-input v-model="form.realName" placeholder="请输入房主姓名" size="mini"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房主手机号" prop="phoneNum">
              <el-input v-model="form.phoneNum" placeholder="请输入房主手机号" size="mini"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="房间户号" prop="roomNo">
              <el-input v-model="form.roomNo" placeholder="请输入房间号" size="mini"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房屋面积" prop="roomArea">
              <el-input v-model="form.roomArea" placeholder="请输入房屋面积" size="mini">
                <template slot="append">㎡</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="面积是否变化" prop="isHasDiffWyf">
              <el-radio-group v-model="form.isHasDiffWyf" size="mini" style="width: 100%">
                <el-radio :value="0" :label="0">无变化</el-radio>
                <el-radio :value="1" :label="1">有变化</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房屋类型" prop="roomType" v-if="this.form.id == undefined">
              <el-select v-model="form.roomType" placeholder="请选择房屋类型" size="mini" style="width:100%;" filterable
                         clearable>
                <el-option label="高层" value=0>高层</el-option>
                <el-option label="多层" value=1>多层</el-option>
                <el-option label="商业" value=2>商业</el-option>
                <el-option label="别墅" value=3>别墅</el-option>
                <el-option label="其他" value=4>其他</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="12" v-if="form.isHasDiffWyf == 1">-->
          <!--            <el-form-item label="每月物业费" prop="everyMonthWyf">-->
          <!--              <el-input v-model="form.everyMonthWyf" placeholder="请输入每月物业费"  type="number" size="mini">-->
          <!--                <template slot="append">元/每月</template>-->
          <!--              </el-input>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="状态" prop="state">
              <el-radio-group v-model="form.state" size="mini">
                <el-radio :value="1" :label="1">正常</el-radio>
                <el-radio :value="0" :label="0">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" size="mini" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel" size="mini">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 充值 -->
    <el-dialog :title="title" :visible.sync="openChongzhi" width="600px" append-to-body>
      <el-form ref="form" :model="formChongzhi" :rules="rulesRecharge" label-width="100px">

        <el-row>
          <el-col :span="10">
            <el-form-item label="充值金额" prop="chongzhi">
              <el-input v-model="formChongzhi.chongzhi" placeholder="请输入充值金额" size="mini"/>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="缴费方式" prop="rechargeWay">
              <el-select v-model="formChongzhi.rechargeWay" placeholder="请选择缴费方式" filterable clearable
                         size="mini">
                <el-option label="现金充值" :value="1"/>
                <el-option label="微信充值" :value="2"/>
                <el-option label="刷卡充值" :value="3"/>
                <el-option label="支付宝充值" :value="4"/>
                <el-option label="转账支付" :value="6"/>
                <el-option label="多种付款" :value="7"/>
                <el-option label="押金支付" :value="10"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="20">
            <el-form-item label="备注信息" prop="remake">
              <el-input v-model="formChongzhi.remake" placeholder="请输入备注信息" size="mini"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" size="mini" type="primary" @click="submitChongzhiForm">确 定</el-button>
        <el-button @click="cancel" size="mini">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 按年生成物业费 -->
    <el-dialog :title="titleAddTemp" :visible.sync="openAddTemp" width="400px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="需生成物业费的年份" prop="year">
              <el-select v-model="form.year" placeholder="选择生成年份" clearable style="width:140px;" size="mini">
                <el-option label="2024年" :value="2024"/>
                <el-option label="2025年" :value="2025"/>
                <el-option label="2026年" :value="2026"/>
                <el-option label="2027年" :value="2027"/>
                <el-option label="2028年" :value="2028"/>
                <el-option label="2029年" :value="2029"/>
                <el-option label="2030年" :value="2030"/>
                <el-option label="2031年" :value="2031"/>
                <el-option label="2032年" :value="2032"/>
                <el-option label="2033年" :value="2033"/>
                <el-option label="2034年" :value="2034"/>
                <el-option label="2035年" :value="2035"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="需生成物业费的月份" prop="month">
            <el-select v-model="form.month" placeholder="选择生成月份" clearable style="width:140px;" size="mini"
                       multiple>
              <el-option label="1月份" :value="1"/>
              <el-option label="2月份" :value="2"/>
              <el-option label="3月份" :value="3"/>
              <el-option label="4月份" :value="4"/>
              <el-option label="5月份" :value="5"/>
              <el-option label="6月份" :value="6"/>
              <el-option label="7月份" :value="7"/>
              <el-option label="8月份" :value="8"/>
              <el-option label="9月份" :value="9"/>
              <el-option label="10月份" :value="10"/>
              <el-option label="11月份" :value="11"/>
              <el-option label="12月份" :value="12"/>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row style="margin-top: -10px;margin-left: 12px">
          <span style="font-size: 12px;color: red;">
            若不选择月份，则按年生成
          </span>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" size="mini" type="primary" @click="submitFormAddTempByYear">确 定
        </el-button>
        <el-button @click="cancelAddTemp" size="mini">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 物业费导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport + '&estateId=' + queryParams.estateId"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <!--          <div class="el-upload__tip" slot="tip">-->
          <!--            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据-->
          <!--          </div>-->
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
                   @click="importTemplateWyf">下载模板
          </el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false" size="mini">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 物业费导入对话框 -->
    <el-dialog :title="uploadWyfYear.title" :visible.sync="uploadWyfYear.open" width="400px" append-to-body>
      <el-upload
        ref="uploadWyfYear"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="uploadWyfYear.headers"
        :action="uploadWyfYear.url + '?updateSupport=' + uploadWyfYear.updateSupport + '&estateId=' + queryParams.estateId"
        :disabled="uploadWyfYear.isUploading"
        :on-progress="handleFileUploadProgressWyfYear"
        :on-success="handleFileWyfYearSuccess"
        :auto-upload="false"
        drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <!--          <div class="el-upload__tip" slot="tip">-->
          <!--            <el-checkbox v-model="uploadWyfYear.updateSupport" /> 是否更新已经存在的用户数据-->
          <!--          </div>-->
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
                   @click="importTemplateWyfYear">下载模板
          </el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="submitFileFormWyfYear">确 定</el-button>
        <el-button @click="uploadWyfYear.open = false" size="mini">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 水电加压导入对话框 -->
    <el-dialog :title="uploadSdJ.title" :visible.sync="uploadSdJ.open" width="400px" append-to-body>
      <el-upload
        ref="uploadSdJ"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="uploadSdJ.headers"
        :action="uploadSdJ.url + '?updateSupport=' + uploadSdJ.updateSupport + '&estateId=' + queryParams.estateId"
        :disabled="uploadSdJ.isUploading"
        :on-progress="handleFileUploadProgressSdJ"
        :on-success="handleFileSuccessSdJ"
        :auto-upload="false"
        drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <!--          <div class="el-upload__tip" slot="tip">-->
          <!--            <el-checkbox v-model="uploadSdJ.updateSupport" /> 是否更新已经存在的用户数据-->
          <!--          </div>-->
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
                   @click="importTemplateSdJ">下载模板
          </el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="submitFileFormSdJ">确 定</el-button>
        <el-button @click="uploadSdJ.open = false" size="mini">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="openKongzhi" width="400px" append-to-body>
      <el-form ref="form" :model="formVacant" :rules="rulesVacant" label-width="100px">
        <el-form-item label="开始时间" prop="vacantBeginDate">
          <el-date-picker
            v-model="formVacant.vacantBeginDate"
            type="month"
            value-format="yyyy-MM-dd"
            placeholder="选择日期时间"
            align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="vacantBeginDate">
          <el-date-picker
            v-model="formVacant.vacantEndDate"
            type="month"
            value-format="yyyy-MM-dd"
            placeholder="选择日期时间"
            align="right">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" size="mini" @click="submitVacant">设置空置房</el-button>
        <el-button type="warning" size="mini" @click="delectVacant">移除空置房</el-button>
        <el-button type="danger" @click="openKongzhi = false" size="mini">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listRoom,
  getRoom,
  delRoom,
  addRoom,
  updateRoom,
  exportRoom,
  exportWater,
  exportEletrict,
  addTempByYear,
  resetQrCode,
  resetQrCodeMulti,
  updateVacant,
  chongzhi,
  delectVacant,
  listShengcheng,
  sendSmsToUnPay
} from "@/api/module/estate/room";
import {getToken} from "@/utils/auth";
import {listAllEstate,} from "@/api/module/estate/estate";
import {listTemplate, NubTemplate} from "@/api/module/estate/wyfTemplate";
import Template from "@/views/module/wx/template.vue";

export default {
  name: "Room",
  components: {Template},
  data() {
    return {
      openKongzhi: false,
      // 按钮loading
      buttonLoading: false,
      qianfei: undefined,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 小区内的房屋列信息表格数据
      roomList: [],
      estatesOptions: [],
      // 弹出层标题
      title: "",
      titleAddTemp: "",
      // 是否显示弹出层
      open: false,
      openAddTemp: false,
      openChongzhi: false,
      daoru: false,
      daochu: false,
      mingxi: false,
      jiaofei: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        estateId: undefined,
        realName: undefined,
        roomNo: undefined,
        state: undefined,
        unPayMonthCount: undefined,
        roomIds: []
      },
      formChongzhi: {
        id: undefined,
        chongzhi: undefined,
        rechargeWay: undefined,
        remake: undefined,
      },
      formVacant: {
        vacantBeginDate: undefined,
        vacantEndDate: undefined,
        estateId:undefined,
        estateName: undefined,
        roomNo:undefined,
        id: undefined,
      },
      tongji: false,
      totalFee: ["正在统计", "正在统计", "正在统计", "正在统计"],
      fromType: '',
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        year: [
          {required: true, message: "请选择年份", trigger: "blur"}
        ],
      },
      rulesVacant: {
        vacantBeginDate: [
          {required: true, message: "请选择空置开始日期", trigger: "blur"}
        ],
        vacantEndDate: [
          {required: true, message: "请选择空置结束日期", trigger: "blur"}
        ],
      },
      rulesRecharge: {
        chongzhi: [
          {required: true, message: "请选择所在小区", trigger: "blur"}
        ],
        rechargeWay: [
          {required: true, message: "请选择缴费方式", trigger: "blur"}
        ],
      },
      // 物业费导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "物业费数据导入",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {Authorization: "Bearer " + getToken()},
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/module/property/feeOrder/template/importDataWyf"
      },

      // 物业费导入参数
      uploadWyfYear: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "物业费数据导入(按年)",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {Authorization: "Bearer " + getToken()},
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/module/property/feeOrder/template/importDataWyfYear"
      },

      // 物业费导入参数
      uploadSdJ: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "水电加压数据导入",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {Authorization: "Bearer " + getToken()},
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/module/property/feeOrder/template/importDataSdJ"
      },
    };
  },
  created() {
    this.queryParams.estateId = this.$route.query.estateId ? parseInt(this.$route.query.estateId) : undefined0;
    this.fromType = this.$route.query.from ? this.$route.query.from : undefined;
    this.qianfei = this.$route.query.qianfei ? this.$route.query.qianfei : undefined;
    this.getList();
  },
  methods: {
    /** 查询小区内的房屋列信息列表 */
    getList() {
      this.loading = true;
      listRoom(this.queryParams).then(response => {
        this.roomList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    wyfjiaofei(row) {
      this.jiaofei = true;
      this.title = "物业缴费";
    },
    getNub() {
      this.queryParams.state = this.$route.query.state ? this.$route.query.state : undefined;
      NubTemplate(this.queryParams).then(response => {
        console.log(response)
        this.totalFee = response;
      });
    },
    getEstateList() {
      listAllEstate().then(response => {
        this.estatesOptions = response.data;
      });
    },
    shengcheng() {
      listShengcheng(this.queryParams).then(response => {
        this.estatesOptions = response.data;
      });
    },
    handleAddTempByYear() {
      this.openAddTemp = true;
      this.titleAddTemp = "按照年份添加物业费模板";
      this.reset();
    },
    cancelAddTemp() {
      this.openAddTemp = false;
      this.reset();
    },
    /**
     *  按年生成物业费
     */
    submitFormAddTempByYear() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          console.log('this.form', this.form)
          if (this.form.estateId != null && this.form.year != null) {
            addTempByYear(this.form).then(response => {
              this.msgSuccess("生成成功");
              this.openAddTemp = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        }
      });
    },
    downloadImg(row) {
      window.location.href = process.env.VUE_APP_BASE_API + "/common/download/room/" + row.id;
    },
    resetQrCode(row) {
      var data = {
        id: row.id
      };
      resetQrCode(data).then(response => {
        if (response.code === 200) {
          this.msgSuccess("生成成功");
          this.getList();
        } else {
          this.msgError("生成失败");
        }
      });
    },
    kongzhi(row) {
      this.kongzhiReset();
      this.openKongzhi = true;
      this.formVacant.id = row.id;
      this.formVacant.estateId = row.estateId;
      this.formVacant.estateName = row.estateName;
      this.formVacant.roomNo = row.roomNo;
    },
    kongzhiReset() {
      this.formVacant = {
        vacantBeginDate: undefined,
        vacantEndDate: undefined,
      }
    },
    submitVacant(row) {
      this.$refs["form"].validate(valid => {
        console.log(valid);
        if (valid) {
          updateVacant(this.formVacant).then(response => {
            this.msgSuccess("申请提交成功");
            this.openKongzhi = false;
            this.getList();
          }).finally(() => {
            this.buttonLoading = false;
          });
        } else {
          this.msgError("请填写后提交");
        }
      });
    },
    delectVacant() {
      this.$refs["form"].validate(valid => {
        console.log(valid);
        if (valid) {
          delectVacant(this.formVacant).then(response => {
            this.msgSuccess("申请提交成功");
            this.openKongzhi = false;
            this.getList();
          }).finally(() => {
            this.buttonLoading = false;
          });
        } else {
          this.msgError("请填写后提交");
        }
      });
    },
    // 取消按钮
    cancel() {
      this.openChongzhi = false;
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        estateId: this.queryParams.estateId,
        estateName: undefined,
        roomNo: undefined,
        buildNo: undefined,
        unitNo: undefined,
        roomNum: undefined,
        roomArea: undefined,
        roomType: undefined,
        realName: undefined,
        phoneNum: undefined,
        bangWxUserId: undefined,
        isHasDiffWyf: 0,
        year: undefined,
        month: [],
        state: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.getEstateList();
      this.open = true;
      this.title = "添加小区内的房屋列信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.loading = true;
      this.reset();
      this.getEstateList();
      const id = row.id || this.ids;
      getRoom(id).then(response => {
        this.loading = false;
        this.form = response.data;
        this.form.isHasDiffWyf = 0;
        this.open = true;
        this.title = "修改小区内的房屋列信息";
      });
    },
    submitChongzhiForm() {
      if (this.formChongzhi.rechargeWay==undefined){
        this.msgError("充值失败，请输入充值方式");
      }else if(this.formChongzhi.chongzhi==undefined){
        this.msgError("充值失败，请输入充值金额");
      }else {
        chongzhi(this.formChongzhi).then(response => {
          this.msgSuccess("充值成功");
          this.openChongzhi = false;
          this.getList();
        }).finally(() => {
          this.buttonLoading = false;
        });
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.id != null) {
            updateRoom(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          } else {
            addRoom(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除小区内的房屋列信息编号为"' + ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.loading = true;
        return delRoom(ids);
      }).then(() => {
        this.loading = false;
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(() => {
      });
    },

    chongzhi(row) {
      this.title = "业主充值"
      this.formChongzhi = {
        id: undefined,
        chongzhi: undefined,
        rechargeWay: undefined,
      }
      this.formChongzhi.id = row.id;
      this.openChongzhi = true;
    },

    /** 删除按钮操作 */
    handleMultiQrcode(row) {
      const ids = row.id || this.ids;
      resetQrCodeMulti(ids).then(response => {
        this.loading = false;
        this.msgSuccess(response.msg);
        this.getList();
      });
    },
    handleSendSmsToUnPay(){

      console.log('this.ids', this.ids)
      const queryParams = this.queryParams;
      if(this.ids.length > 0){
        queryParams.roomIds = this.ids;
      }
      let message = '是否确认对已欠费'+ queryParams.unPayMonthCount + '个月以上的业主发送短信提醒 ?';
      if(queryParams.unPayMonthCount!=undefined && queryParams.unPayMonthCount > 0){
        if(this.ids.length > 0) {
          message = '是否确认对当前选择的已欠费' + queryParams.unPayMonthCount + '个月以上的业主发送短信提醒 ?';
        }else{
          message = '是否确认对已欠费' + queryParams.unPayMonthCount + '个月以上的业主发送短信提醒 ?';
        }
      }else{
        if(this.ids.length > 0) {
          message = '是否确认对当前选择的欠费的业主发送短信提醒 ?';
        }else{
          message = '是否确认对当前小区所有欠费的业主发送短信提醒 ?';
        }
      }
      this.$confirm(message, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.loading = true;
        return sendSmsToUnPay(queryParams);
      }).then(response => {
        this.getList();
        this.loading = false;
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有小区内的房屋列信息数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.exportLoading = true;
        return exportRoom(queryParams);
      }).then(response => {
        this.download(response.msg);
        this.exportLoading = false;
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleWaterExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出本年度水表底数数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.exportLoading = true;
        return exportWater(queryParams);
      }).then(response => {
        this.download(response.msg);
        this.exportLoading = false;
      }).catch(() => {
      });
    },

    handleEletrictExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出本年度电表底数数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.exportLoading = true;
        return exportEletrict(queryParams);
      }).then(response => {
        this.download(response.msg);
        this.exportLoading = false;
      }).catch(() => {
      });
    },

    mingxi1() {
      this.mingxi = true
    },
    tongji1() {
      if (this.tongji == false) {
        this.tongji = true
      } else {
        this.tongji = false
      }
      if (this.totalFee[0] == "正在统计") {
        this.getNub();
      }
    },
    daoru1() {
      this.daoru = true
    },
    daochu1() {
      this.daochu = true
    },
    guanbi1() {
      this.daoru = false
    },
    guanbi2() {
      this.daochu = false
    },
    guanbi3() {
      this.mingxi = false
    },
    guanbi4() {
      this.jiaofei = false
    },
    /** 导入按钮操作 */
    handleImportWyf() {
      this.upload.title = "物业费数据导入";
      this.upload.open = true;
    },
    handleImportWyfYear() {
      this.uploadWyfYear.title = "物业费数据导入(按年)";
      this.uploadWyfYear.open = true;
    },
    /** 导入按钮操作 */
    handleImportSdJ() {
      this.uploadSdJ.title = "水电加压数据导入";
      this.uploadSdJ.open = true;
    },
    /** 下载模板操作 */
    importTemplateWyf() {
      // importTemplateWyf().then(response => {
      //   this.download("https://www.caihengyun.com/chyimg/file/temp/%E7%89%A9%E4%B8%9A%E8%B4%B9%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx");
      // });
      // this.download("");
      window.location.href = "https://www.caihengyun.com/chyimg/file/temp/%E7%89%A9%E4%B8%9A%E8%B4%B9%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx";
    },
    /** 下载模板操作 */
    importTemplateWyfYear() {
      // importTemplateWyf().then(response => {
      //   this.download("https://www.caihengyun.com/chyimg/file/temp/%E7%89%A9%E4%B8%9A%E8%B4%B9%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx");
      // });
      // this.download("");
      window.location.href = "https://www.caihengyun.com/chyimg/file/temp/%E7%89%A9%E4%B8%9A%E8%B4%B9%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF-%E6%8C%89%E5%B9%B4%E7%94%9F%E6%88%90.xlsx";
    },
    /** 下载模板操作 */
    importTemplateSdJ() {
      // importTemplateSdJ().then(response => {
      //   this.download(response.msg);
      // });
      window.location.href = "https://www.caihengyun.com/chyimg/file/temp/%E6%B0%B4%E7%94%B5%E8%B4%B9%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx";
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传中处理
    handleFileUploadProgressWyfYear(event, file, fileList) {
      this.uploadWyfYear.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", {dangerouslyUseHTMLString: true});
      this.getList();
    },
    // 文件上传成功处理
    handleFileWyfYearSuccess(response, file, fileList) {
      this.uploadWyfYear.open = false;
      this.uploadWyfYear.isUploading = false;
      this.$refs.uploadWyfYear.clearFiles();
      this.$alert(response.msg, "导入结果", {dangerouslyUseHTMLString: true});
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    submitFileFormWyfYear() {
      this.$refs.uploadWyfYear.submit();
    },

    // 文件上传中处理
    handleFileUploadProgressSdJ(event, file, fileList) {
      this.uploadSdJ.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccessSdJ(response, file, fileList) {
      this.uploadSdJ.open = false;
      this.uploadSdJ.isUploading = false;
      this.$refs.uploadSdJ.clearFiles();
      this.$alert(response.msg, "导入结果", {dangerouslyUseHTMLString: true});
      this.getList();
    },
    // 提交上传文件
    submitFileFormSdJ() {
      this.$refs.uploadSdJ.submit();
    }
  }
};
</script>
